HTML Quotation and Citation Elements

    In HTML, we have different elements and methods to represent quotations and cite the text. Some of the popular HTML elements for quotation are <q>, <blockquotes>, and <abbr>. In this tutorial, we will list all the HTML quotation and citation elements that you must know.

    So, without further ado, let's get started!

    HTML Quotation and Citation Elements

    • HTML <q> Element

    The <q> element is used for short quotations; it adds double quotation marks around the selected text.

    Example 

    <p> <strong> Gandhi Said </strong> <q> Live as if you were to die tomorrow. Learn as if you 
were to live forever. </q> <p>

    Output 

    Gandhi Said "Live as if you were to die tomorrow. Learn as if you were to live forever."
    • HTML <blockquote>

    It is similar to the <q> element. However,  it is used to represent those quotes that have been picked from another source. Unlike <q> element, it does not quote the text in a double inverted comma, instead, it uses indentation to display the quotation.

    Example 

    <p>About Python:</p>

<blockquote cite="https://www.techgeekbuzz.com/tutorial/python/learn-python-programming/">

Python is the most powerful and widely used programming language of 2019. In the past
few years, it has hyped the usages on the next level. Now Python is everywhere from 
web-development to Artificial Intelligence.

</blockquote>

    Output

    About Python:

    Python is the most powerful and widely used programming language of 2019. In the past few years, it has hyped the usages on the next level. Now Python is everywhere from web-development to Artificial Intelligence.

    The cite attribute describes the source location from where the quote has been picked.

    • HTML <abbr>

    The <abbr> element stands for abbreviation. By using this HTML element, we can define the full form of any abbreviation or acronym. The title attribute should be mentioned inside the <abbr> tag which defines the acronym meaning.

    Example 

    <p>Welcome to <abbr title="TechGeekBuzz">TGB</abbr> </p>

    When you hover over the acronym you will get its full meaning.

    Output 

    Welcome to TGB
    • HTML <address>

    As the name suggests, the <address> element helps to highlight the contact or address information of a user or business. The browser parses the address content and displays it in italic format.

    Example 

    <address>
Country: India.<br>
City: New-Delhi <br>
PhNo: 9911991199
</address>

    Output 

    Country: India.
City: New-Delhi 
PhNo: 9911991199
    • HTML <cite>

    Generally, developers use the <cite> element to represent the title of the content, and the browser shows the cited content in italic format.

    Example 

    <p><cite>The Alchemist </cite> is a novel by Brazilian author Paulo Coelho. </p>

    Output 

    The Alchemist is a novel by Brazilian author Paulo Coelho.
    • HTML <bdo>

    The <bdo> element can reverse the letters of selected text content from right to left. To reverse a text from right to left, we need to mention the dir attribute inside the <bdo> tag.

    Example 

    <bdo dir="rtl">Welcome to TechGeekBuzz</bdo>

    Output 

    Welcome to TechGeekBuzz

    Takeaway

    Here are the key points that you need to remember:

    • <q> put double inverted common before and after the specified text.
    • <blockquote> indents the quotation text.
    • <abbr> define the acronym meaning.
    • <cite> represent the title of the text.
    • <bdo> overrides the text direction.
    Previous Tutorial Next Tutorial